<template>
  <div>
    <div style="height:50px;">
      线条粗细:
      <el-select v-model="lineWidth" style="width:80px" size="mini">
        <el-option v-for="item in options" :key="item.value" :value="item.value" :label="item.label"></el-option>
      </el-select>
      线条颜色:
      <!-- <sketch-picker v-model="lineColor" @input = "changeColor"></sketch-picker>-->
      <input type="color" v-model="lineColor" style="width:100px"/>
      画布背景:
      <input type="text" style="width:80px" v-model="bgColor"/>
      <!--      是否裁剪:
            <el-checkbox v-model="isCrop"></el-checkbox>-->
    </div>
    <div style=" border:1px solid black">
      <vue-esign ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor"
                 :bgColor.sync="bgColor"/>
    </div>
    <el-button @click="handleReset" type="success">清空画板</el-button>
    <!--    <el-button @click="handleGenerate" type="success">生成图片</el-button>-->

    <div style="float:left">
      <p>
        画布背景:为空则是透明底色，支持多种写法 （'#ccc'，'#E5A1A1'，'rgb(229, 161, 161)'，'rgba(0,0,0,.6)'，'red'）
      </p>

      <p>
        清空画板:清掉画布所有内容包括背景色
      </p>
    </div>
  </div>
</template>
<script>
import {Sketch} from 'vue-color'

export default {
  name: 'signCanvas',
  components: {
    'sketch-picker': Sketch
  },
  data() {
    return {
      lineWidth: 6,
      lineColor: '#FF3481',
      bgColor: '',
      resultImg: '',
      isCrop: false,
      options: [],
    }
  },
  created() {
    this.initOptions()
    console.log(localStorage.getItem("test"))
  },
  methods: {
    initOptions() {
      for (let i = 2; i <= 12; i += 2) {
        this.options.push({value: i, label: i})
      }
    },
    handleReset() {
      this.$refs.esign.reset()
    },
    handleGenerate() {
      this.$refs.esign.generate().then(res => {
        this.resultImg = res
      }).catch(err => {
        alert(err) // 画布没有签字时会执行这里 'Not Signned'
      })
    },
    changeColor(value) {
      console.log(value)
    }
  }
}
</script>

<style>
.el-button {
  margin: 10px;
}
</style>
